<template>
  <div>
    <div class="bckdiv">
      <v-img class="backImgClass" style="position: fixed; left: 0px; top:0px; width:100%; height:100%;"></v-img>
      <v-img class="tipImgClass" style="position: fixed; left: 838px; bottom:38px; width:244px; height:50px;"></v-img>
      <v-img class="loginBackImgClass" style="position: fixed; left: 360px; bottom:270px; width:1200px; height:500px;">
      </v-img>
      <v-img class="zhClass" style="position: fixed; left: 1092px; bottom:346px; width:396px; height:500px; ">
          <div style="position:absolute; left:70px; top:60px; width:240px; height:30px; font-size:24px; color:white;">机场净空监测管理系统</div>
          <div style="position:absolute; left:131px; top:104px; width:118px; height:28px; font-size:28px; color:white;">账号登录</div>
          <input type="text" v-model = "username" style="position:absolute; width:300px; height:56px; left:40px; top:192px; font-zize:16px; background-color:white; padding-left:20px;" placeholder="请输入用户名">
          <input type="password" v-model = "password" style="position:absolute; width:300px; height:56px; left:40px; top:268px; font-zize:16px; background-color:white; padding-left:20px;" placeholder="请输入密码">
          <v-btn style="background: linear-gradient(89.68deg, #2BB994 0%, #246881 100%); color:white; width:300px; height:56px;  left:40px; top:384px; position:absolute;" @click="onLoginClicked()">登录</v-btn>
        </v-img>

    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

const axios = require("axios").default;
import Cesium from "../plugins/cesium";
import { Viewer } from "photo-sphere-viewer";
import PhotoSphereViewer from "photo-sphere-viewer";
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
import { createApp } from "@vue/composition-api";

import { Graticule } from "../plugins/Graticule.js";

import { moveable } from "../plugins/moveable.js";

import MeasureDistance from "../plugins/measure.js";

import MeasurePolyline from "../plugins/measurepolyline.js";
// css
import "./../assets/css/css.css"

import router from "@/router/router";
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";

export default Vue.extend({
  name: "HelloLogin",

  props: [],

  created()
  {
    let ratio=0;
      if(window.devicePixelRatio !== undefined)
      {
        ratio = window.devicePixelRatio
      }

      if(ratio)
      {
          ratio = Math.round(ratio * 100)
      }
      document.body.style.setProperty('zoom',100 / Number(ratio) + '')
  },

  data() {
    return {
      username:"",
      password:"",

    }
  },

  computed: {
    ...mapState({}),
    ...mapGetters([]),
  },
  methods: {
    ...mapActions([]),
    ...mapMutations([]),

    onLoginClicked()
    {
      console.log("login",this.username,this.password);
      
      router.push("cesium")

    }
  },
  mounted(){
      window.onresize=()=>{
      let ratio=0;
      if(window.devicePixelRatio !== undefined)
      {
        ratio = window.devicePixelRatio
      }

      if(ratio)
      {
          ratio = Math.round(ratio * 100)
      }
      document.body.style.setProperty('zoom',100 / Number(ratio) + '')
    }
  },

});


</script>

<style>
.bckdiv
{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
 overflow: hidden;
 width: 101%;
 height: 100%;
}

.backImgClass
{
  background:url("./../assets/img/bj.png") no-repeat
}

.tipImgClass
{
  background:url("./../assets/img/logo-白.png") no-repeat
}

.loginBackImgClass
{
  background:url("./../assets/img/常州图片.png") no-repeat
}

.zhClass
{
  background:url("./../assets/img/账号.png") no-repeat

}
</style>
